import {h, HTMLAttributes, ref} from 'vue'
import {
  DataTableColumns,
  MenuOption,
  NButton,
  NTag,
  TransferRenderSourceList,
  TreeOption
} from 'naive-ui'
import {usePermissionStore} from "@/stores/premission_store.ts";
import GgIcon from "@/components/icon/gg-icon.vue";
import {NMenu} from "naive-ui/es/menu";
import {NTree} from "naive-ui/es/tree";

// 点击类型枚举
export enum ClickType {
  UPDATE = 'update',
  ADD = 'add',
  DELETE = 'delete',
  NONE = 'no'
}

interface MenuDown {
  id: number,
  parentId: number,
  key: string,
  lable: string,
  disabled: boolean,
  icon: string,
  props?: HTMLAttributes
  children: MenuDown[]
}

//获取菜单下拉
export const useMenuDownOptions = (): MenuDown[] => {

  const menuList = usePermissionStore().menuList;
  const transformMenuItem = (menu: Menu.MenuModel): MenuDown | null => {
    // 构建路由配置
    const menuDown: MenuDown = {
      id: menu.id,
      parentId: menu.parentId,
      key: menu.id,
      label: menu.title,
      iconShow: menu.icon,
      icon() {
        return h(GgIcon, {
          name: menu.icon,
        })
      },
      children: []
    }
    // 递归处理子菜单（仅处理有效子项）
    if (menu.children?.length) {
      menuDown.children = menu.children
        .map(transformMenuItem)
        .filter(Boolean) as MenuDown[]
    }

    // 清理空children属性
    if (menuDown.children?.length === 0) {
      delete menuDown.children
    }

    return menuDown
  }

  return menuList.map(transformMenuItem).filter(Boolean) as MenuDown[]
}


// 默认的菜单模型
export const DEFAULT_MENU_MODEL: Role.BaseInfo = {
  roleId: 0,
  roleName: '',
  description: '',
  createdAt: '',
  updatedAt: '',
  roleCode: '',
  status: 1,
  home: {
    id: 0,
    title: '',
    name: '',
    icon: '',
    requiresAuth: false,
    disabled: false,
    show: false,
    menuType: 1,
    iconType: 1,
    href: '',
    route: {
      path: '',
      component: ''
    },
  }
}

// 表单规则
export const useFormRules = () => {
  return {
    roleName: {
      required: true,
      message: '请输入角色名字',
      trigger: 'blur',

    },
    roleCode: {
      required: true,
      message: '请输入角色CODE',
      trigger: 'blur'
    },
    status: {
      required: true,
      message: '请输入状态',
      trigger: ['blur', 'number']
    },
    meanHome: {
      required: true,
      message: '请输入角色默认首页',
      trigger: 'blur'
    }

  }
}

// 表格列配置
export const useColumns = (handleClick: (type: ClickType, row: Role.BaseInfo) => void): DataTableColumns => {
  return [
    {
      title: '角色名称',
      resizable: true,
      key: 'roleName',
      align: 'center'
    }, {
      title: '角色CODE',
      resizable: true,
      key: 'roleCode',
      align: 'center',
    },
    {
      title: '角色描述',
      resizable: true,
      align: 'center',
      key: 'description',
      ellipsis: {
        tooltip: true
      }
    },

    {
      title: '角色状态',
      resizable: true,
      align: 'center',
      key: 'status',
      render(row: Role.BaseInfo) {
        return h(
          NTag,
          {
            style: {
              marginRight: '6px'
            },
            type: row.status == 1 ? "info" : "warning",
            bordered: false
          },
          {
            default: () => row.status == 1 ? "success" : "warn"
          }
        )
      }
    },
    {
      title: '角色首页',
      resizable: true,
      align: 'center',
      key: 'home.title',
      ellipsis: {
        tooltip: true
      },
      render(row: Role.BaseInfo) {
        const option: MenuOption = {
          label: row.home?.title,
          key: row.home?.id,
          disabled: true,
          icon: () => h(
            GgIcon,
            {
              name: row.home?.icon
            }
          )
        }
        const options: MenuOption[] = Array();
        options.push(option)
        return [
          h(NMenu
            ,
            {
              options: options,
            },
          ),
        ]
      }
    },
    {
      title: '创建时间',
      resizable: true,
      align: 'center',
      key: 'createdAt',
    },
    {
      title: '修改时间',
      resizable: true,
      align: 'center',
      key: 'updatedAt',
    },
    {
      title: '操作',
      key: 'actions',
      align: 'center',
      render(row: Role.BaseInfo) {
        return [
          h(
            NButton,
            {
              size: 'small',
              onClick: () => handleClick(ClickType.UPDATE, row)
            },
            {default: () => '修改'}
          ),
          h(
            NButton,
            {
              size: 'small',
              onClick: () => handleClick(ClickType.DELETE, row)
            },
            {default: () => '删除'}
          )
        ]
      }
    }
  ]
}

// 右键菜单选项
export const useContextMenuOptions = (handleClick: (type: ClickType, row: Role.BaseInfo) => void) => {
  return [
    {
      label: '新增',
      key: ClickType.ADD,
      onClick: (row: Role.BaseInfo) => {
        handleClick(ClickType.ADD, row)
      }
    },
    {
      label: '编辑',
      key: ClickType.UPDATE,
      onClick: (row: Role.BaseInfo) => {
        handleClick(ClickType.UPDATE, row)
      }
    },
    {
      label: '删除',
      key: ClickType.DELETE,
      onClick: (row: Role.BaseInfo) => {
        handleClick(ClickType.DELETE, row)
      }
    }
  ]
}

// Modal样式配置
export const modalStyle = {
  width: '600px'
}
